<template>
  <div>
    <div style="margin-bottom: 30px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><span style="font-size: 20px">首页</span></el-breadcrumb-item>
        <el-breadcrumb-item><span style="font-size: 20px">实习文件提交</span></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- <p align="left">
      <el-row>
        <el-col :span="4">
          <el-button @click="addVisible=true" type="primary" icon="el-icon-edit" style="position: relative; left: 15px;" >上传文件</el-button>
        </el-col>
      </el-row>
    </p> -->
	<!-- 页面表头 -->
	<el-table :data="fileTableList" @selection-change="handleSelectionChange" >
	  <el-table-column type="selection" width="120"></el-table-column>
	  <el-table-column prop="sno" label="学号" width="150px"></el-table-column>
	  <el-table-column prop="snoName" label="学生名" width="150px"></el-table-column>
	  <el-table-column prop="tnoName" label="教师名" width="150px"></el-table-column>
	  <el-table-column prop="name" label="文件名" width="150px"></el-table-column>
	  <el-table-column label="文件路径" width="150px">
	  		  <template slot-scope="scope">
	  		    <a :href="scope.row.fileIndex" target="_blank">{{scope.row.fileIndex}}</a>
	  		  </template>
	  </el-table-column>
	  <el-table-column label="分数" width="150px">
	  		  <template slot-scope="scope">
	  			  <p v-if="scope.row.score==0">暂未批改</p>
	  			  <p v-else>scope.row.score</p>
	  		  </template>
	  </el-table-column>
	  <el-table-column label="操作" width="280px">
		<template slot-scope="scope">
		  <el-button @click="updateRow(scope.row)" type="primary" class="el-icon-edit" size="medium" >修改信息</el-button>
		  <el-button @click="deleteRow(scope.row.id)" type="danger" class="el-icon-delete" size="medium">删除</el-button>
		</template>
	  </el-table-column>
	</el-table>

    <!-- 新增文件 -->
    <el-dialog :visible.sync="addVisible">
      <h3 style="text-align: center;">文件上传</h3>
      <div style="padding: 30px;">
        <el-form label-width="80px" :model="addFile">
          <el-form-item label="文件名">
            <el-select v-model="addFile.type" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="实习文件上传">
            <el-upload ref="upload"
                       accept=".docx,.doc,.ppt,.pptx"
                       action="#"
                       :auto-upload="true"
                       :multiple="false"
                       :file-list="fileList"
                       :before-upload="beforeUpload"
                       :http-request="uploadHttpRequest"
                       :on-remove="fileRemove"
                       :on-change="fileChange">
              <el-button size="small" type="infor">选择文件</el-button>
              <div slot="tip" class="el-upload__tip">一次只能上传一个图片文件，且不超过100M</div>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button @click="save()" type="primary">确定</el-button>
            <el-button @click="addVisible=false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <!-- 修改文件 -->
    <el-dialog :visible.sync="updateVisible">
      <h3 style="text-align: center;">修改文件信息</h3>
      <div style="padding: 30px;">
        <el-form label-width="80px" :model="updateFile">
          <el-form-item label="文件名">
            <el-select v-model="updateFile.type" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
              </el-option>
			  </el-select>
          </el-form-item>
          <el-form-item label="实习文件">
            <el-upload ref="upload"
                       accept=".png,.jpg,.docx,.doc,.ppt,.pptx"
                       action="#"
                       :auto-upload="true"
                       :multiple="false"
                       :file-list="fileList"
                       :before-upload="beforeUpload"
                       :http-request="updateUploadHttpRequest"
                       :on-remove="fileRemove"
                       :on-change="fileChange">
              <el-button size="small" type="infor">选择文件</el-button>
              <div slot="tip" class="el-upload__tip">一次只能上传一个图片文件，且不超过100M</div>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button @click="saveUpdate()" type="primary">确定</el-button>
            <el-button @click="updateVisible=false">取消</el-button>
          </el-form-item>

        </el-form>
      </div>
    </el-dialog>
<!--    <el-pagination style=" position: absolute;"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="pageNum"
                   :page-sizes="[8, 10, 15, 30]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination> -->
  </div>
</template>

<script>
	import {file_getFileList, uploadFile,file_fileList,file_add,file_update} from '../axios/api/fileApi.js'
export default{
  data(){
    return{
      fileTableList:[],
      updateFile:{
      },
      addFile:{
      },
      input: '',
      updateVisible: false,
      addVisible: false,
      importVisible: false,
      typeList : [],
      fileList: [],
      options: [],
      value: '',
	  user:{}
    }
  },
  created() {
	this.user = JSON.parse(localStorage.getItem('user'))
	if(this.user){
		this.getFileListPages()
	}
    file_getFileList().then(res =>{
		this.options = res.data.list
    })
	
  },
  methods:{
    // 上传文件之前的钩子：判断上传文件格式、大小等，若返回false则停止上传
    beforeUpload(file) {
      // 文件大小限制为100M
      const fileLimit = file.size / 1024 / 1024 < 100;
      if(!fileLimit) {
        this.$message.error('上传文件大小不超过100M！');
      }
      return fileLimit
    },
    // 自定义上传方法，param是默认参数，可以取得file文件信息，具体信息如下图
    uploadHttpRequest(param) {
      const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加
      formData.append('file', param.file) //添加文件对象
      uploadFile(formData).then(response =>{
        this.addFile.fileIndex = response.data
        param.onSuccess()  // 上传成功的文件显示绿色的对勾
        this.$message.success(response.msg)
      }).catch(error =>{
        let text = JSON.parse(JSON.stringify(error)).status === 404
            ? '未发现页面'
            : error.response.data.msg === null ? '网络异常，请重试' : error.response.data.msg;
        Message.error({
          showClose: true,
          message: text
        })
        param.onError()
      })
    },
    // 自定义上传方法，param是默认参数，可以取得file文件信息，具体信息如下图
    updateUploadHttpRequest(param) {
      const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加
      formData.append('file', param.file) //添加文件对象
      uploadFile(formData).then(response =>{
        param.onSuccess()  // 上传成功的文件显示绿色的对勾
        this.updateFile.fileIndex = response.data
        this.$message.success(response.msg)
      }).catch(error =>{
        let text = JSON.parse(JSON.stringify(error)).status === 404
            ? '未发现页面'
            : error.response.data.msg === null ? '网络异常，请重试' : error.response.data.msg;
        Message.error({
          showClose: true,
          message: text
        })
        param.onError()
      })
    },
    // 点击上传：手动上传到服务器，此时会触发组件的http-request
    submitUpload() {
      console.log(this.$refs.upload.submit())
    },
    // 文件发生改变
    fileChange(file, fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]] // 展示最后一次选择的文件
      }
    },
    // 移除选择的文件
    fileRemove(file, fileList) {
      if(fileList.length < 1) {
        this.uploadDisabled = true //未选择文件则禁用上传按钮
      }
    },
    //修改文件信息
    updateRow(rowData){
      this.updateVisible = true
      this.updateFile= rowData
    },
    save(){
		this.$set(this.addFile, 'sno', this.user.codeName)
      file_add(this.addFile).then((response)=>{
        this.$message.success(response.msg);
        this.addVisible = false
        this.addFile = {
        }
        this.getFileListPages()
      })
    },
    saveUpdate(){
      file_update(this.updateFile).then((response)=>{
        this.$message.success(response.msg);
        this.getFileListPages()
        this.updateVisible = false
      })
    },
    //删除单条记录
    deleteRow(id){
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFile(id).then((response) =>{
          this.$message.success(response.msg);
          this.getFileListPages()
        })
      }).catch(() => {
        this.$message.info("取消删除")
      });
    },
    getFileListPages(){
		let user = localStorage.getItem('user')
		const data = {
			codeName: user.codeName
		}
      file_fileList(data).then(res =>{
        this.fileTableList = res.data.list
      })
    },
    //模糊查询
    searchFun(){
      this.pageNum = 1
      const qo = {
        name: this.input,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      fileList(qo).then((response) =>{
        this.total = response.data.total
        this.fileList = response.data.records
        this.input = ''
        this.typeId = null
        this.fileSetId = null
      })
    },
    importExcel(){
      this.importVisible = true
    },
    handleSelectionChange(val) {
      this.delFileList = val
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getFileListPages()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getFileListPages()
    }
  }
}
</script>

<style>
</style>

